<template>
<el-form ref="big_form" :label-position=" 'right' " label-width="90px"
				 :inline="true">
	<!-- 日期范围 -->
	<el-form-item label="日期范围">
		<el-date-picker
			v-model="chart3_use_data.datetime"
			type="daterange"
			range-separator="-"
			start-placeholder="Start date"
			end-placeholder="End date"
			value-format="YYYY-MM-DD"
		/>
	</el-form-item>

	<el-form-item label="小类名称">
		<FuzzySearchSmallVer2
			@DataUse="small_auto_complete_in_data_analyse($event as any)"
			ref="small_clear_in_data_analyse"
			:disable="false"/>
	</el-form-item>

	<el-form-item>
		<el-button type="primary" @click="chart3()">提交</el-button>
	</el-form-item>

</el-form>
<v-chart class="chart" :option="chart3_option" :autoresize="true"/>
</template>

<script setup lang="ts">
import { EChartsOption } from 'echarts'
import VChart from "vue-echarts";
import type {SmallAutoCompletion} from "@/components/first/FuzzySearchSmallVer2.vue";
import {computed, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {reqPartDetail} from "@/api/first/DataAnalysis/index.ts";
import {PartDetailResponseData} from "@/api/first/DataAnalysis/type.ts";
import FuzzySearchSmallVer2 from "@/components/first/FuzzySearchSmallVer2.vue";
const chart3_use_data = reactive<{
	datetime: null | string
	small_id: undefined | number
}>({
	datetime: null,
	small_id: undefined,
})
const chart3_price = ref<[string, number][]>([])
const chart3_number = ref<[string, number][]>([])
const chart3_value = ref<[string, number][]>([])

const small_auto_complete_in_data_analyse = (cmy: SmallAutoCompletion) => {
	chart3_use_data.small_id = cmy.small_id as number
}
const chart3 = () => {

	if (chart3_use_data.datetime === null) {
		ElMessage.warning('请选择时间')
		return
	}
	if (chart3_use_data.small_id === undefined) {
		ElMessage.warning('请选择小类')
		return
	}
	let date_start: string = chart3_use_data.datetime[0]
	let date_stop: string = chart3_use_data.datetime[1]



	reqPartDetail({
		start_date: date_start,
		end_date: date_stop,
		small_id: chart3_use_data.small_id as number
	}).then((result: PartDetailResponseData) => {
		chart3_price.value = result.data.price
		chart3_number.value = result.data.number
		chart3_value.value = result.data.value
		ElMessage.success(result.success?.message)
	})
}

const chart3_option = computed<EChartsOption>(() => {
	return {
		tooltip: {
			trigger: 'axis'
		},
		dataZoom: [
			{
				type: 'inside'
			},
			{
				type: 'slider'
			}
		],
		legend: {
			data: ['在库数量', '价格', '在库价值'],
			selectedMode: 'single',
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		xAxis: {
			type: "time"
		},

		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '在库数量',
				type: 'line',
				step: 'end',
				data: chart3_number.value
			},
			{
				name: '价格',
				type: 'line',
				step: 'end',
				data: chart3_price.value
			},
			{
				name: '在库价值',
				type: 'line',
				step: 'end',
				data: chart3_value.value
			},
		]
	}
})
</script>

<style scoped>
.chart {
	height: 400px;
}
</style>